<template>
  <view class="list-container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-item" @tap="showFilter('area')">
        <text>区域</text>
        <uni-icons type="bottom" size="12" color="#666"></uni-icons>
      </view>
      <view class="filter-item" @tap="showFilter('price')">
        <text>价格</text>
        <uni-icons type="bottom" size="12" color="#666"></uni-icons>
      </view>
      <view class="filter-item" @tap="showFilter('type')">
        <text>户型</text>
        <uni-icons type="bottom" size="12" color="#666"></uni-icons>
      </view>
      <view class="filter-item" @tap="showFilter('more')">
        <text>筛选</text>
        <uni-icons type="bottom" size="12" color="#666"></uni-icons>
      </view>
    </view>
    
    <!-- 列表内容 -->
    <scroll-view 
      scroll-y 
      class="house-list"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view 
        class="house-item" 
        v-for="(item, index) in houseList" 
        :key="index"
        @tap="viewDetail(item)"
      >
        <image class="house-image" :src="item.image" mode="aspectFill"></image>
        <view class="house-content">
          <view class="title">{{item.title}}</view>
          <view class="info">
            <text>{{item.area}}㎡</text>
            <text>{{item.direction}}</text>
            <text>{{item.floor}}</text>
          </view>
          <view class="tags">
            <text v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
          </view>
          <view class="location">
            <text>{{item.location}}</text>
            <text class="distance">{{item.distance}}</text>
          </view>
          <view class="price">
            <text class="number">{{item.price}}</text>
            <text class="unit">元/月</text>
          </view>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading" v-if="isLoading">加载中...</view>
      <view class="no-more" v-if="noMore">没有更多了</view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const houseList = ref([
  {
    title: '整租·望京SOHO 2室1厅 南北通透',
    area: '89',
    direction: '南北通透',
    floor: '中��/18层',
    tags: ['随时看房', '押一付一', '精装修'],
    location: '望京SOHO',
    distance: '距离14号线望京站步行290米',
    price: '3800',
    image: 'https://pic1.58cdn.com.cn/anjuke_58/2ee7265822088a7c6a3b2c9cc1f7e7c0'
  },
  // 更多列表数据...
])

const isLoading = ref(false)
const noMore = ref(false)
const isRefreshing = ref(false)

const showFilter = (type) => {
  console.log('显示筛选:', type)
}

const loadMore = () => {
  if (isLoading.value || noMore.value) return
  isLoading.value = true
  // 模拟加载更多
  setTimeout(() => {
    // 添加更多数据
    isLoading.value = false
  }, 1000)
}

const onRefresh = () => {
  isRefreshing.value = true
  // 模拟刷新
  setTimeout(() => {
    isRefreshing.value = false
  }, 1000)
}

const viewDetail = (item) => {
  uni.navigateTo({
    url: '/pages/detail/detail'
  })
}
</script>

<style scoped>
.list-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.filter-bar {
  display: flex;
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
}

.filter-item uni-icons {
  margin-left: 6rpx;
}

.house-list {
  flex: 1;
  background: #f8f8f8;
}

.house-item {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
  display: flex;
}

.house-image {
  width: 240rpx;
  height: 180rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.house-content {
  flex: 1;
}

.title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.info {
  display: flex;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.info text {
  margin-right: 20rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16rpx;
}

.tags text {
  font-size: 22rpx;
  color: #ff552e;
  background: rgba(255,85,46,.1);
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
}

.location {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
}

.distance {
  color: #666;
}

.price {
  display: flex;
  align-items: baseline;
}

.price .number {
  font-size: 36rpx;
  color: #ff552e;
  font-weight: bold;
}

.price .unit {
  font-size: 24rpx;
  color: #ff552e;
  margin-left: 4rpx;
}

.loading, .no-more {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  padding: 30rpx 0;
}
</style> 